<template>
  <div class="container data-container">
    <div class="head">

      <hospital-selection @selectHospital="selectHospital" :hospital_id="hospital_id"></hospital-selection>

      <date-selection @selectDate="selectDate"></date-selection>
    </div>
    <!-- 可下拉框 -->
    <cube-scroll ref="scroll">

      <div class="list">
        <div class="data-total">
          <div class="first">
            <div class="tip">今日成交总额</div>
            <div><span class="small-title">¥</span>{{volume_all_money}}</div>
          </div>
          <div class="second">
            <div class="s-item line">
              <div class="i-box"><span class="round"></span>流水单</div>
              <div><span class="big-font">{{allowance_all_count}}</span>笔</div>
            </div>
            <div class="s-item line">
              <div class="i-box"><span class="round"></span>接待人数</div>
              <div><span class="big-font">{{to_hospital_counts_butler}}</span>人</div>
            </div>
            <div class="s-item">
              <div class="i-box"><span class="round"></span>预约人数</div>
              <div><span class="big-font">{{all_order_counts}}</span>人</div>
            </div>
          </div>
          <div class="third">
            <div class="t-item line">
              <div>大额交易≥5万</div>
              <div><span class="big-font">{{allowance_big_trade}}</span>笔</div>
            </div>
            <div class="t-item">
              <div>小额交易<5万</div>
              <div><span class="big-font">{{allowance_small_trade}}</span>笔</div>
            </div>
          </div>

        </div>

        <div class="table-title">
          <span>数据统计</span>
        </div>
        <!-- 数据表格 -->
        <div class="data-table">
          <div class="row row-head">
            <div>来源</div>
            <div>成交额</div>
            <div>人数</div>
            <div>成交占比</div>
          </div>
          <div class="row row-list" v-for="(item, index) in sourceList" :key="index">
            <div>{{ item.type }}</div>
            <div>{{ item.money }}</div>
            <div>{{ item.count }}</div>
            <div>{{ item.proportion }}</div>
          </div>
        </div>
        <div style="height:120px;"></div>
      </div>
    </cube-scroll>

  </div>

</template>

<script>
import { Toast } from "mint-ui";
import dateSelection from "@/components/date/dateSelection";
import hospitalSelection from "@/components/hospital/hospitalSelection";
import  api from '../../assets/js/api'
export default {
  data () {
    return {
      //医院id
      hospital_id: "",
      hospitalList: [],
      //默认是筛选今天
      curDate: new Date().Format("yyyy-MM-dd"),

      //今日成交总额
      volume_all_money:0,

      //大额交易笔数
      allowance_big_trade:0,
      //小额交易笔数
      allowance_small_trade:0,
      //流水单数量
      allowance_all_count:0,
      //预约量
      all_order_counts:0,
      //接待人数 (该管家接待的)
      to_hospital_counts_butler:0,

      sourceList:[],
    };
  },
  methods: {
    getData() {
      if (this.hospital_id == "" || this.hospital_id == null) {
          Toast({
            message: "请选择医院查看数据",
            position: "bottom",
            duration: 2000
          });
          return false;
      }
      let dataLoading = this.loading("加载中", 10000);
      dataLoading.show();

      this.axios.post("/api/butler/data_analysis", {
        'hospital_id':this.hospital_id,
        'date':this.curDate
      })
        .then(response => {
          dataLoading.hide();
          let res = response.data;
          if (res.code == 200) {
            this.sourceList = res.data.source

            this.volume_all_money = res.data.volume_all_money
            this.allowance_big_trade = res.data.allowance_big_trade
            this.allowance_small_trade = res.data.allowance_small_trade
            this.allowance_all_count = res.data.allowance_all_count
            this.all_order_counts = res.data.all_order_counts
            this.to_hospital_counts_butler = res.data.to_hospital_counts_butler
          }
        })
        .catch(error => {
          dataLoading.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });

    },

    //子组件传递过来的时间筛选
    selectDate (date) {
      this.curDate = date;
      this.getData();
      console.log(date);
    },
    //子组件传递过来的医院筛选
    selectHospital (hospital_id) {
      this.hospital_id = hospital_id;
      this.getData();
      //缓存选中的医院id
      sessionStorage.setItem("data_hospital_id",hospital_id);
    },
    //从缓存中读取医院列表
    getHospitalList () {
      this.hospital_id = "";
      let list = JSON.parse(localStorage.hospital_list);
      if (list.length > 0) {
        list.forEach(element => {
          element.text = element.name;
          element.value = element.id;
        });
        this.hospitalList = list;
      }
    },

  },

  components: {
    dateSelection,
    hospitalSelection
  },
  created () {
    this.axios.defaults.baseURL = api
    //从缓存中读取医院id
    let data_hospital_id = sessionStorage.getItem("data_hospital_id");
    this.hospital_id = data_hospital_id
    this.getData();
  }

}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  .head{
      margin-bottom: 16px;
  }
}
.data-container{
  margin-bottom: 200px;
  overflow-y: scroll;
}
.list{
  width: 92%;
  margin:0px 4% 20px;
  padding-bottom: 80px;
  position: relative;

}
// .cube-scroll-wrapper{
//   margin-top: 16px !important;
// }

.round{
  width: 4px;
  height: 4px;
  border-radius: 5px;
  background-color: #FF628BEC;
  // display: inline-block;
  // margin-right: 5px;
}
.list .data-total{

  border-radius: 8px;
  // border: 1px solid rgba(255, 255, 255, 1);
  // box-shadow: rgba(233, 236, 242, 1) 0 2px 1px 1px;
  position: relative;

  background:rgba(255,255,255,1);
  box-shadow:0px 4px 8px 1px rgba(233,236,242,1);
}

.data-total .first{
  background-color:RGBA(254, 142, 146, 1);
  background: linear-gradient(
    90deg,
    RGBA(255, 132, 165, 1),
    RGBA(253, 150, 129, 1)
  );

  height: 90px;
  color: #fff;
  font-size: 30px;
  line-height: 40px;
  padding-left: 4%;
  padding-top: 2%;
  border-radius: 5px 5px 0px 0px;
  .tip{
    font-size: 18px;
    line-height: 30px;
  }
}

.second{
  display: flex;
  height: 80px;
  line-height: 40px;

  margin-bottom: 5px;
  .s-item{
    flex-grow: 1;
    text-align: center;

    .i-box{
      position: relative;
      span{
        position: absolute;
        top: 42%;
        left: 12%;
      }
    }
  }
  .line {
    position: relative;
  }
  .line::after{
    content:"";
    display: block;
    position: absolute;
    width: 1px;
    height: 64%;
    background-color: RGBA(247, 247, 247, 1);
    right: 1px;
    top:18%;
  }
}

.second::after{
    content:"";
    display: block;
    position: absolute;
    left: 6%;
    width: 88%;
    height: 1px;
    background-color: RGBA(247, 247, 247, 1);
    bottom: 80px;
    // top:18%;
}

.third{
  display: flex;
  height: 80px;
  line-height: 40px;
  .t-item{
    flex-grow: 1;
    text-align: center;
  }
    .line {
    position: relative;
  }
  .line::after{
    content:"";
    display: block;
    position: absolute;
    width: 1px;
    height: 64%;
    background-color: RGBA(247, 247, 247, 1);
    right: 1px;
    top:18%;
  }
}


.table-title{
  margin: 18px 38% 10px;
  span{
    display: block;
    font-weight: 500;
    // border-bottom: 3px solid RGBA(253, 161, 145, 1);
    // width:30%;
    text-align: center;
    width: 100%;
    position: relative;
  }
  span::after{
    content:"";
    display: block;
    position: absolute;
    height: 7px;
    width: 100%;
    background: RGBA(253, 161, 145, 0.6);
    bottom: 1px;
  }
}

.data-table{
  width: 100%;
  // border:solid 1px
  border-radius: 12px 12px 6px 6px;
  // box-shadow: #FFECEFF4 0 2px 1px 1px;
  height: auto;

  margin-top: 10px;

  background:rgba(255,255,255,1);
  box-shadow:0px 4px 8px 1px rgba(233,236,242,1);
}
.data-table .row{
  display: flex;
  height: 40px;
  line-height: 40px;
  font-size: 15px;

  text-align: center;
  div{
    flex:1 1 1%;
  }
}
.data-table .row-list:last-child{
  background-color: RGBA(255, 240, 243, 1);
}


.data-table .row-head{
  background-color: RGBA(255, 135, 158, 1);
  color: #fff;

  border-radius: 12px 12px 0px 0px;
}

.big-font{
  font-size: 22px;
  font-weight: 700;
}
.small-title{
  font-size: 24px;
}

</style>

